<!-- 文件详情页面_目前是在想定编辑中选择模型的时候使用，当点击节点时显示模型的基本信息和版本号、型号 -->
<template>
    <div class="file-detail-container">
        <div class="file-detail-container-left">
            <div class="file-detail-header">
                {{ $t("tool.modelManage.basicInfo") }}
            </div>
            <div class="file-detail-content">
                <el-form ref="form" label-position="top" :model="form" label-width="90px" class="jtyj-form"
                    style="width: 100%; margin-right: 2%">
                    <el-form-item :label="$t('tool.modelManage.chineseName')" prop="modelName">
                        <!-- 模型名称 -->
                        <el-input :disabled="disabled" v-model="form.modelName"
                            :placeholder="$t('tool.others.placehoderInput')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('tool.modelManage.englishName')" prop="modelEnglishName">
                        <!-- 模型英文名 -->
                        <el-input :disabled="disabled" v-model="form.modelEnglishName"
                            :placeholder="$t('tool.others.placehoderInput')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('tool.modelManage.categoryCode')" prop="categoryCode">
                        <!-- 类别代号 -->
                        <el-input-number :disabled="disabled" v-model="form.categoryCode" :precision="0"
                            controls-position="right" :placeholder="$t('tool.others.placehoderInput')"
                            style="width: 100%"></el-input-number>
                    </el-form-item>
                    <el-form-item :label="$t('tool.modelManage.categoryLabel')">
                        <!-- 类别标识 -->
                        <el-select v-model="form.categoryLabel" :disabled="disabled" style="width: 100%"
                            class="jtyj-select" :placeholder="$t('tool.others.placehoderSelect')">
                            <el-option v-for="item in categorySignOptions" :key="item.value"
                                :label="$t('tool.modelManage.' + item.i18nName)" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('tool.modelManage.modelResolution')" prop="modelResolution">
                        <!-- 模型分辨率 -->
                        <el-select v-model="form.modelResolution" :disabled="disabled"
                            :placeholder="$t('tool.others.placehoderInput')" style="width: 100%" class="jtyj-select">
                            <el-option v-for="item in resolutionOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('tool.modelManage.modelDescription')">
                        <!-- 模型描述 -->
                        <el-input :disabled="disabled" v-model="form.modelDescription" type="textarea"
                            :placeholder="$t('tool.others.placehoderInput')"></el-input>
                    </el-form-item>
                    <!-- 模型类型 -->
                    <el-form-item :label="$t('tool.modelManage.modelType')">
                        <el-select v-model="form.modelType" :disabled="disabled" placeholder="">
                            <el-option :label="$t('tool.modelManage.modelType1')" :value="0"></el-option>
                            <el-option :label="$t('tool.modelManage.modelType2')" :value="1"></el-option>
                            <el-option :label="$t('tool.modelManage.modelType3')" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="file-detail-container-right">
            <div class="file-detail-header">
                {{ $t("tool.modelManage.optionalAttributes") }}
            </div>
            <div class="file-detail-content">
                <el-form ref="selectForm" :rules="rules" label-position="top" :model="form" label-width="90px"
                    class="jtyj-form" style="width: 100%; margin-right: 2%">
                    <!-- 主版本选择 -->
                    <el-form-item :label="$t('tool.modelManage.mainVersionSelect')" prop="mainVersionId">
                        <el-select v-model="form.mainVersionId" @change="handleChangeMainVersion" style="width: 100%"
                            :disabled="mainVersionOptions.length == 0"
                            :placeholder="$t('tool.others.placehoderSelect')">
                            <el-option v-for="item in mainVersionOptions" :key="item.mainVersionId"
                                :label="item.defaultVersion ? item.mainVersionName + '  ★' : item.mainVersionName"
                                :value="item.mainVersionId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 型号选择 -->
                    <el-form-item :label="$t('tool.modelManage.modelingSelect')" prop="modelingId">
                        <el-select v-model="form.modelingId" :disabled="modelingOptions.length == 0"
                            :placeholder="$t('tool.others.placehoderSelect')" style="width: 100%" class="jtyj-select">
                            <el-option v-for="item in modelingOptions" :key="item.value" :label="item.chineseName"
                                :value="item.modelingId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="file-detail-btn">
                <el-button class="jtyj-btn-primary" @click="submitForm">{{ $t("setup.buttonText.confirm") }}</el-button>
            </div>
        </div>

    </div>
</template>
<script>
import { getMainVersionList, getModelingList } from "@/api/myspace/model-manage-tool/model-manage";
export default {
    data() {
        return {
            form: {},
            rules: {
                mainVersionId: [
                    { required: true, message: '请进行版本选择', trigger: 'change' },
                ],
                modelingId: [
                    { required: true, message: '请进行建模选择', trigger: 'change' }
                ]
            },
            modelingOptions: [],
            mainVersionOptions: [],
            categorySignOptions: [
                {
                    label: "其他",
                    value: "1",
                    i18nName: "other",
                },
                {
                    label: "卫星",
                    value: "2",
                    i18nName: "satellite",
                },
            ],
            resolutionOptions: [
                {
                    label: "无",
                    value: "无",
                },
                {
                    label: "战术/战役级",
                    value: "战术/战役级",
                },
                {
                    label: "任务级",
                    value: "任务级",
                },
                {
                    label: "交战级",
                    value: "交战级",
                },
                {
                    label: "工程级",
                    value: "工程级",
                },
            ],
        }
    },
    props: {
        disabled: {
            type: Boolean,
        },
        nodeInfo: {
            type: Object,
        }
    },
    watch: {
        nodeInfo: {
            handler(newValue, oldValue) {
                console.log(newValue);

                this.form = { ...newValue.data };
                this.mainVersionOptions = [];
                this.modelingOptions = [];
                this.getMainVersionList();
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        // 获取主版本列表
        getMainVersionList() {
            getMainVersionList({
                modelId: this.form.modelId,
            }).then((response) => {
                if (response.code == 200) {
                    this.mainVersionOptions = response.rows;
                }
            });
        },
        // 处理主版本切换
        handleChangeMainVersion() {
            this.modelingOptions = [];
            delete this.form.modelingId;
            this.getParametricModelingList();
        },
        //获取参数化建模列表
        getParametricModelingList() {
            getModelingList({
                modelId: this.form.modelId,
                mainVersionId: this.form.mainVersionId,
            }).then((response) => {
                if (response.code == 200) {
                    this.modelingOptions = response.rows;
                }
            });
        },
        // 提交表单
        submitForm() {
            // 提交前校验
            this.$refs['selectForm'].validate((valid) => {
                if (valid) {
                    this.$emit('submit', this.form);
                }
            });
        },
    }
}


</script>
<style lang="scss" scoped>
.file-detail-container {
    width: 100%;
    height: 100%;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;

    .file-detail-container-left {
        width: 50%;
        overflow: auto;
    }

    .file-detail-container-right {
        width: 50%;
        border-left: 1px solid var(--ui-border-color-split);
        padding-left: 10px;
        padding-right: 20px;

        .file-detail-btn {
            padding-right: 15px;
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
    }

    .file-detail-header {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        color: var(--app-text-fg-low);
        font-size: var(--ui-font-size-base);
        letter-spacing: 5px;
        font-weight: var(--ui-font-weight-base);
        box-sizing: border-box;
    }

    .file-detail-content {
        width: 100%;
        height: 85%;
        display: flex;
        // align-items: center;
        box-sizing: border-box;
    }

}
</style>